<!-- 未更改 -->
<template>
    <div id="emp">
        <el-card class="box-card" shadow="always">
            <!-- card的头部 -->
            <template #header>
                <div class="card-header">


                    <span class="title">处方管理界面</span>
                    <div class="input_search">
                        <el-input v-model="search" @input="search_change" placeholder="姓名查询" />
                    </div>
                    <el-button class="button_edit" type="primary" :icon="Plus" @click="preDate4Add">添加新员工</el-button>
                </div>
            </template>
            <!-- 以下是card的body区域，直接使用标签即可，不需要使用插槽 -->
            <!-- 员工信息列表 -->
            <el-table :data="tableData" style="width: 100%" height="450">
                <!-- 使用扩展行显示行记录详情
        一般情况下，扩展行在最左侧 -->
                <!-- el-descriptions 展示行信息 -->
                <!-- <el-table-column type="expand">
                    <template #default="scope">
                        <div style="padding: 20px">
                            
                            <el-descriptions class="margin-top" :title="'员工' + scope.row.name + '的详情'" :column="3" border>
                                <template #extra>
                                    <el-button type="primary">Operation</el-button>
                                </template>

                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <user />
                                            </el-icon>
                                            员工编号
                                        </div>
                                    </template>
                                    {{ scope.row.regnum }}
                                </el-descriptions-item>

                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <user />
                                            </el-icon>
                                            员工姓名
                                        </div>
                                    </template>
                                    {{ scope.row.name }}
                                </el-descriptions-item>

                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <user />
                                            </el-icon>
                                            挂号
                                        </div>
                                    </template>
                                    {{ scope.row.registid }}
                                </el-descriptions-item>

                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <user />
                                            </el-icon>
                                            岗位
                                        </div>
                                    </template>
                                    {{ scope.row.schid }}
                                </el-descriptions-item>

                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <office-building />
                                            </el-icon>
                                            Address
                                        </div>
                                    </template>
                                    No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
                                </el-descriptions-item>

                            </el-descriptions>
                        </div>
                    </template>
                </el-table-column> -->

                <el-table-column prop="regnum" label="员工编号" />

                <!-- <el-table-column prop="deptid" label="部门" /> -->
                <!-- <el-table-column prop="registid" label="挂号" /> -->
                <!-- <el-table-column prop="schid" label="排班" /> -->

                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="loginname" label="昵称" />
                <el-table-column prop="password" label="密码" />
                <el-table-column prop="createtime" label="创立日期" />
                <!-- 
        <el-table-column
          prop="delmark"
          label="delmark"
          width="100"
          :filters="[
              { text: 1, value: '1' },
              { text: 0, value: '0' },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        ><template #default="scope">
            用于更换展示数据的背景颜色 
            <el-tag
              :type="scope.row.delmark==0?'success':'warning'"

              disable-transitions
              >{{ scope.row.delmark }}</el-tag>
          </template>
        </el-table-column> -->

                <el-table-column prop="delmark" label="生效标记">
                    <template #header>
                        生效标记<br />
                        <el-switch v-model="show_del" active-text="全部显示" :active-value=0 :inactive-value=1
                            inactive-text="仅显示生效" @click="switch_del" />
                    </template>
                    <template #default="scope">
                        <el-switch v-model="scope.row.delmark" active-color="#ff4949" inactive-color="#13ce66"
                            active-text="失效" :active-value='1' :inactive-value='0' inactive-text="生效"
                            @click="switch_change(scope.row)" />
                        <!-- <el-button @click="test(scope.row)">123</el-button> -->
                    </template>
                </el-table-column>

                <!-- <el-table-column prop="delmark" label="删除？"/> -->

                <el-table-column label="Operations">

                    <template #default="scope">
                        <el-button class="button_edit" @click="preDate4mod(scope.$index, scope.row)">编辑</el-button>
                        <!-- <el-button size="small" type="danger">Delete</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 添加增加和修改对话框即可  -->
    </div>




    <el-dialog v-model="AddDialogVisible" title="新增员工" width="30%">

        <el-form :model="addform">

            <el-form-item label="员工编号" :label-width="formLabelWidth">
                <el-input v-model="addform.regnum" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="昵称" :label-width="formLabelWidth">
                <el-input v-model="addform.loginname" autocomplete="off" />
            </el-form-item>
            <el-form-item label="真实姓名" :label-width="formLabelWidth">
                <el-input v-model="addform.name" autocomplete="off" />
            </el-form-item>


            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="addform.password" autocomplete="off" type="password" />
            </el-form-item>
            <el-form-item label="确认密码" :label-width="formLabelWidth">
                <el-input v-model="addform.copypsw" autocomplete="off" type="password" />
            </el-form-item>
            <el-form-item label="创办时间" :label-width="formLabelWidth">
                <el-input v-model="addform.createtime" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item v-if="psw_same" label="" :label-width="formLabelWidth" style="color: red;">
                <span style="color: red;">两次输入的密码不同</span>
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="addData">
                    Confirm
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="ModDialogVisible" title="更改信息" width="30%">

        <el-form :model="modform">

            <el-form-item label="员工编号" :label-width="formLabelWidth">
                <el-input v-model="modform.regnum" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="昵称" :label-width="formLabelWidth">
                <el-input v-model="modform.loginname" autocomplete="off" />
            </el-form-item>
            <el-form-item label="真实姓名" :label-width="formLabelWidth">
                <el-input v-model="modform.name" autocomplete="off" />
            </el-form-item>


            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="modform.password" autocomplete="off" @input="configPsw" /> <!--type="password"-->
            </el-form-item>
            <!-- <el-form-item v-if="PswChange" label="确认密码" :label-width="formLabelWidth">
                    <el-input v-model="modform.copypsw" autocomplete="off" type="password"/>
                </el-form-item> -->

            <el-form-item label="创办时间" :label-width="formLabelWidth">
                <el-input v-model="modform.createtime" autocomplete="off" disabled />
            </el-form-item>

        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="modData">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import $axios from '../../utils/axios'
const filterTag = (value, row) => {
    console.log("value: " + typeof (value));
    console.log("delmark:" + typeof (row.delmark));
    console.log("result:" + row.delmark === value);
    return row.delmark === value
}
const psw_same = ref(false)

const formLabelWidth = '140px'
import {

    Plus,
    User
} from '@element-plus/icons-vue'
const FilterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !show_del.value ||
            data.name.toLowerCase().includes(show_del.value.toLowerCase())
    )
)
const tableData = ref([
    {
        regnum: 2324,
        loginname: 'zzj',
        name: '赵子鉴',
        password: '1',
        createtime: "2023-7-30 19:08:03",
        delmark: 0,

    }
])


const AddDialogVisible = ref(false)
const ModDialogVisible = ref(false)
const show_del = ref(0)
// const test=(row) => {
//     console.log(row);
//     row.delmark=row.delmark==1?0:1;
// }

const addform = ref({

    regnum: 2324,
    loginname: 'zzj',
    name: '赵子鉴',
    password: '1',
    copypsw: '1',
    createtime: "2023-7-30 19:08:03",
    delmark: 0,
})
const PswChange = ref(false);
const modform = ref({
    // regnum: 2324,
    // loginname: 'zzj',
    // name: '赵子鉴',
    // password: '1',

    // createtime: "2023-7-30 19:08:03",
    // delmark: 0,
})

let curentindex = -1
const preDate4Add = () => {
    const today = new Date();
    var year = parseInt(today.getFullYear());
    var month = today.getMonth() + 1 < 10 ? '0' + (today.getMonth() + 1) : today.getMonth() + 1
    var day = today.getDate() < 10 ? '0' + today.getDate() : today.getDate();
    var hour = today.getHours() < 10 ? '0' + today.getHours() : today.getHours();
    var minute = today.getMinutes() < 10 ? '0' + today.getMinutes() : today.getMinutes();
    var second = today.getSeconds() < 10 ? '0' + today.getSeconds() : today.getSeconds();
    addform.value.createtime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;

    AddDialogVisible.value = true
    // addform.value = JSON.parse(
    //     JSON.stringify({
    //         regnum: '2324',
    //         loginname: 'zzj',
    //         name: '赵子鉴1',
    //         password: '1',
    //         copypsw: '1',
    //         createtime: "2023-8-29 19:08:03",
    //         delmark: 0,
    //     })
    // )

}



const preDate4mod = async (index, row) => {
    console.log(typeof (parseInt(row.regnum)), parseInt(row.regnum));

    const path = "/register/q/byregnum/" + row.regnum
    const { data: res } = await $axios.get(path)
    if (res.code == 200) {
        console.log(res);
        curentindex = index;
        ModDialogVisible.value = true;
        modform.value = res.result;
    }
}


const modData = () => {
    //已通
    console.log("mod:", modform.value);
    const path = '/register/update'
    $axios.post(path, modform.value, {

        headers: {
            'Content-Type': 'application/json;utf-8'
        }

    }).then((res) => {
        if (res.data.code === 200) {
            console.log("addform:", modform.value);
            console.log("res:", res.data);
            tableData.value.splice(curentindex, 1, modform.value)

            ModDialogVisible.value = false
        }
    })

}
//已通，待改数据
const addData = async () => {

    console.log(addform.value);
    const path = "/register/add"
    if (addform.value.password != addform.value.copypsw) {
        psw_same.value = true;
        return;
    }
    const { data: res } = await $axios.put(
        path, addform.value,
        {
            headers: {
                'Content-Type':
                    'application/json; charset=UTF-8' //将表单数据传递转化为form-data类型
            }
        })
    if (res.code == 200) {

        console.log("re:", res.result);
        addform.value.regnum = res.result.regnum

        let obj = JSON.parse(JSON.stringify(addform.value))

        tableData.value.push(obj)
        //loaddata()
        AddDialogVisible.value = false
        loaddata()
    }

}

const switch_change = (value) => {
    console.log(value)
    const path = "/register/delet"
    $axios.post(path, value, {

        headers: {
            'Content-Type': 'application/json;utf-8'
        }

    }).then((res) => {
        if (res.data.code === 200) {
            console.log(res.result);
        }
    })
}
const switch_del = async () => {
    console.log(show_del.value);
    //1是仅显示生效，0为全部显示
    if (show_del.value === 0) {
        loaddata()
    }
    else if (show_del.value === 1) {
        const path = '/register/q/all'
        // 发同步请求
        // 发完ajax请求以后，进入等待状态，直到服务器做出响应或者超时
        // 并且返回服务器做出响应
        console.log("加载生效数据");
        const { data: res } = await $axios.get(path)
        // 应用结果
        if (res.code === 200) {
            tableData.value = res.result
            console.log("加载数据成功：");
            console.log(res.result);

        }
        tableData.value = tableData.value.filter(checkItem)
        console.log(tableData.value);
    }

}
function checkItem(num) { return num.delmark === 0; }
function searchItem(num) { console.log("test:\n" + num.name + " " + num.name.indexOf(search.value)); return !(num.name.indexOf(search.value) === -1); }
const search = ref()
const search_change = async (val) => {
    const path = '/register/q/all'
    // 发同步请求
    // 发完ajax请求以后，进入等待状态，直到服务器做出响应或者超时
    // 并且返回服务器做出响应
    console.log("为表格自动加载数据");
    const { data: res } = await $axios.get(path)
    // 应用结果
    if (res.code === 200) {
        tableData.value = res.result
        console.log("加载数据成功：");
        console.log(res.result);

    }
    var s = tableData.value.filter(searchItem);
    tableData.value = s
    console.log(tableData.value.filter(searchItem));

}
const autoSet = () => {

}
autoSet()
// 为表格加载数据

const loaddata = async () => {
    // 定义请求路径

    const path = '/register/q/all'
    // 发同步请求
    // 发完ajax请求以后，进入等待状态，直到服务器做出响应或者超时
    // 并且返回服务器做出响应
    console.log("为表格自动加载数据");
    const { data: res } = await $axios.get(path)
    // 应用结果
    if (res.code === 200) {
        tableData.value = res.result
        console.log("加载数据成功：");
        console.log(res.result);

    }
}
// 调用
loaddata()
</script>

<style scoped land="scss">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
        font-size: 24px;
    }

    .input_search {

        width: 400px;
        left: 0%;
    }

    .el-card__header {
        padding: 0;
    }
}

.button_edit {
    /* background: linear-gradient(135deg, rgb(132, 176, 229), rgb(63, 103, 214), rgb(132, 154, 234)); */
    /* background-color: linear-gradient(135deg, rgb(0, 0, 255), rgb(0, 128, 255), rgb(0, 255, 255)); */
    /* background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 105, 143)); */
    color: white;
    background: linear-gradient(135deg, rgb(100, 100, 255), rgb(0, 128, 255), rgb(0, 200, 250));
    transition: background-color 1.5s ease;
}

.button_edit:hover {
    background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 175, 203));
    color: yellow;
}

.button_edit:focus {
    background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 175, 203));
    color: white;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 100%;
    margin-top: 12px;
    border-radius: 12px;
}

.cell-item {
    display: flex;
    align-items: center;
}
</style>